<nz-card>
  <!-- S 基础信息 -->
  <div class="form-item-wrap">
    <p class="item-title">
      <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
      基础信息
    </p>
    
    <div class="item-control">
      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>优惠券类型</nz-form-label>
        <nz-form-control nzFlex="400px">
          <nz-radio-group
            [(ngModel)]="formParams.type"
            [nzDisabled]="detailForms | sencondCouponEditStatus"
            (ngModelChange)="couponTypeChange($event)">
            <label nz-radio [nzValue]="1">满减券</label>
            <label nz-radio [nzValue]="2">折扣券</label>
            <label nz-radio [nzValue]="3">随机券</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>优惠券名称</nz-form-label>
        <nz-form-control nzFlex="400px">
          <input
            nz-input
            placeholder="请输入优惠券名称"
            maxlength="10"
            [(ngModel)]="formParams.name"
            [disabled]="detailForms | sencondCouponEditStatus: 'special'"
          />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px">备注</nz-form-label>
        <nz-form-control nzFlex="400px">
          <nz-textarea-count [nzMaxCharacterCount]="100">
            <textarea
              rows="4"
              nz-input
              maxlength="100"
              placeholder="仅内部可见"
              [(ngModel)]="formParams.remark"
              [disabled]="detailForms | sencondCouponEditStatus: 'special'"
            ></textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>发放总量</nz-form-label>
        <nz-form-control nzFlex="132px">
          <nz-input-group nzAddOnAfter="张">
            <nz-input-number
              style="width: 100%;"
              [nzMin]="1"
              [nzMax]="999999"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入"
              [(ngModel)]="formParams.total"
              [nzDisabled]="detailForms | sencondCouponEditStatus: 'special'"
            ></nz-input-number>
          </nz-input-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>使用门槛</nz-form-label>
        <nz-form-control>
          <div class="form-item-flex">
            <nz-input-group style="width: 220px;" nzAddOnBefore="订单满" nzAddOnAfter="元可用">
              <nz-input-number
                style="width: 100%;"
                [nzMin]="0"
                [nzMax]="100000"
                [nzStep]="1"
                [nzPrecision]="0"
                nzPlaceHolder="请输入"
                [(ngModel)]="formParams.orderLimitMoney"
                (nzBlur)="thresholdVerif()"
                (ngModelChange)="formParams.orderLimitMoneyCheck = false"
                [nzDisabled]="detailForms | sencondCouponEditStatus"
              ></nz-input-number>
            </nz-input-group>

            <span
              class="m-l-10"
              nz-tooltip
              [nzTooltipTitle]="titleTemplate"
            >
              <i nz-icon nzType="exclamation-circle" nzTheme="outline"></i>
            </span>
            <ng-template #titleTemplate let-thing>
              <p>1. 如果填写0的话,表示该优惠券无适用门槛</p>
              <p>
                2. 如果优惠券的额度>=订单金额,则订单金额会自动扣减至0元,此时提交订单会直接变成"待发货(已付款)"状态,请谨慎操作;
              </p>
            </ng-template>

            <label
              *ngIf="formParams.orderLimitMoney == '0'"
              nz-checkbox
              class="m-l-8"
              [(ngModel)]="formParams.orderLimitMoneyCheck"
              [nzDisabled]="detailForms | sencondCouponEditStatus"
            >我已知晓无门槛优惠券可能带来的风险</label>
          </div>
        </nz-form-control>
      </nz-form-item>

      <!-- 满减 -->
      <ng-container *ngIf="formParams.type == 1">
        <nz-form-item>
          <nz-form-label nzFlex="120px" nzRequired>减免额度</nz-form-label>
          <nz-form-control nzFlex="500px">
            <nz-input-group style="width: 180px;" nzAddOnAfter="元">
              <nz-input-number
                style="width: 100%;"
                [nzMin]="1"
                [nzMax]="10000"
                [nzStep]="1"
                [nzPrecision]="0"
                nzPlaceHolder="请输入"
                [(ngModel)]="formParams.limitSmall"
                (nzBlur)="reductionVerif(0)"
                [nzDisabled]="detailForms | sencondCouponEditStatus"
              ></nz-input-number>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
      </ng-container>

      <!-- 折扣 -->
      <ng-container *ngIf="formParams.type == 2">
        <nz-form-item>
          <nz-form-label nzFlex="120px" nzRequired>折扣力度</nz-form-label>
          <nz-form-control nzFlex="500px">
            <nz-input-group style="width: 220px;" nzAddOnBefore="打" nzAddOnAfter="折">
              <nz-input-number
                style="width: 100%;"
                [nzMin]="0.1"
                [nzStep]="0.1"
                [nzMax]="9.9"
                [nzPrecision]="1"
                nzPlaceHolder="请输入"
                [(ngModel)]="formParams.limitSmall"
                [nzDisabled]="detailForms | sencondCouponEditStatus"
              ></nz-input-number>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzFlex="120px" nzRequired>最高减免金额</nz-form-label>
          <nz-form-control nzFlex="500px">
            <nz-input-group style="width: 220px;" nzAddOnAfter="元">
              <nz-input-number
                style="width: 100%;"
                [nzMin]="1"
                [nzMax]="10000"
                [nzPrecision]="0"
                nzPlaceHolder="请输入"
                [(ngModel)]="formParams.limitBig"
                [nzDisabled]="detailForms | sencondCouponEditStatus"
              ></nz-input-number>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
      </ng-container>

      <!-- 随机 -->
      <ng-container *ngIf="formParams.type == 3">
        <nz-form-item>
          <nz-form-label nzFlex="120px" nzRequired>优惠金额</nz-form-label>
          <nz-form-control>
            <span class="p-r-6">范围内随机</span>
            <nz-input-number
              [nzMin]="1"
              [nzMax]="10000"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入"
              [(ngModel)]="formParams.limitSmall"
              (nzBlur)="rangeValueVerif()"
              [nzDisabled]="detailForms | sencondCouponEditStatus"
            ></nz-input-number>

            <span class="p-l-10 p-r-10">至</span>

            <nz-input-number
              [nzMin]="formParams.limitSmall + 1"
              [nzMax]="10000"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入"
              [(ngModel)]="formParams.limitBig"
              (nzBlur)="rangeValueVerif()"
              [nzDisabled]="detailForms | sencondCouponEditStatus"
            ></nz-input-number>
            <span class="p-l-6">元</span>
          </nz-form-control>
        </nz-form-item>
      </ng-container>
    </div>
  </div>
  <!-- E 基础信息 -->

  <nz-divider></nz-divider>

  <!-- S 领取设置 -->
  <div class="form-item-wrap">
    <p class="item-title">
      <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
      领取设置
    </p>

    <div class="item-control">
      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>前端展示</nz-form-label>
        <nz-form-control nzFlex="400px">
          <nz-radio-group
            [(ngModel)]="formParams.isShowWeb"
            [nzDisabled]="detailForms | sencondCouponEditStatus: 'special'"
            (ngModelChange)="isShowChange($event)">
            <label nz-radio [nzValue]="1">展示</label>
            <label nz-radio [nzValue]="0">不展示</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="formParams.isShowWeb === 1">
        <nz-form-label nzFlex="120px" nzRequired>可领取时间</nz-form-label>
        <nz-form-control nzFlex="400px">
          <nz-range-picker
            [nzShowTime]="true"
            [nzShowTime]="{ nzFormat: 'HH:mm' }"
            [(ngModel)]="availableDates"
            nzFormat="yyyy-MM-dd HH:mm"
            (ngModelChange)="onDateChange($event, ['getBeginTime', 'getEndTime'])"
            [nzDisabled]="detailForms | sencondCouponEditStatus: 'special' && detailForms.status !== 2"
          ></nz-range-picker>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>领取人限制</nz-form-label>
        <nz-form-control nzFlex="400px">
          <nz-radio-group
            [(ngModel)]="formParams.userType"
            [nzDisabled]="detailForms | sencondCouponEditStatus">
            <label nz-radio [nzValue]="0">不限制</label>
            <label nz-radio [nzValue]="1">C端用户</label>
            <label nz-radio [nzValue]="2">B端用户</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <!-- E 领取设置 -->

  <nz-divider></nz-divider>

  <!-- S 使用设置 -->
  <div class="form-item-wrap">
    <p class="item-title">
      <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
      使用设置
    </p>

    <div class="item-control">
      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>限制使用时间</nz-form-label>
        <nz-form-control>
          <nz-radio-group
            class="vertical-radio"
            [(ngModel)]="limitUseGroup"
            (ngModelChange)="limitGroupChange($event)"
            [nzDisabled]="detailForms | sencondCouponEditStatus">
            <label nz-radio [nzValue]="1">
              <nz-input-group style="width: 300px;" nzAddOnBefore="领取当日起" nzAddOnAfter="天内可用">
                <nz-input-number
                  style="width: 100%;"
                  [nzDisabled]="limitUseGroup === 2"
                  [nzMin]="0"
                  [nzStep]="1"
                  [nzPrecision]="0"
                  nzPlaceHolder="请输入"
                  [(ngModel)]="formParams.limitTimeNum"
                  [nzDisabled]="detailForms | sencondCouponEditStatus"
                ></nz-input-number>
              </nz-input-group>
  
              <span
                class="m-l-10"
                nz-tooltip
                [nzTooltipTitle]="titleTemplate2"
              >
                <i nz-icon nzType="exclamation-circle" nzTheme="outline"></i>
              </span>
              <ng-template #titleTemplate2 let-thing>
                <p>0 表示当天</p>
                <p>1 表示明天</p>
              </ng-template>
            </label>

            <label nz-radio class="m-t-10" [nzValue]="2">
              <nz-range-picker
                [nzDisabled]="limitUseGroup === 1"
                [nzShowTime]="true"
                [nzShowTime]="{ nzFormat: 'HH:mm' }"
                nzFormat="yyyy-MM-dd HH:mm"
                [(ngModel)]="limitDates"
                (ngModelChange)="onDateChange($event, ['useBeginTime', 'useEndTime'])"
                [nzDisabled]="detailForms | sencondCouponEditStatus"
              ></nz-range-picker>
            </label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>使用说明</nz-form-label>
        <nz-form-control nzFlex="400px">
          <nz-textarea-count [nzMaxCharacterCount]="100">
            <textarea
              rows="4"
              nz-input
              maxlength="100"
              placeholder="建议填写优惠券的具体使用信息"
              [(ngModel)]="formParams.useDesc"
              [disabled]="detailForms | sencondCouponEditStatus: 'special'"
            ></textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <!-- E 使用设置 -->

  <nz-divider></nz-divider>

  <!-- S 适用商品 -->
  <div class="form-item-wrap">
    <p class="item-title">
      <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
      适用商品
      <span class="title-tip">（默认所有商品都不可用，请在下方添加可用的内容）</span>
    </p>

    <div class="item-control">
      <nz-form-item>
        <nz-form-label nzFlex="120px">指定机型</nz-form-label>
        <nz-form-control nzFlex="400px">
          <p class="appoint-model">
            <label
              nz-radio
              [(ngModel)]="modelAll"
              (ngModelChange)="modelOwnerAllChange($event, 1)"
              [nzDisabled]="detailForms | sencondCouponEditStatus: 'special'"
            >全选</label>

            <button
              nz-button
              nzType="link"
              nzSize="small"
              nzDanger
              (click)="modelOwnerNotAllChange(1)"
            >全不选</button>
          </p>
          <div class="p-t-6">
            已选
            <b *ngIf="modelAll;else templateAll">
              全部
            </b>
            <ng-template #templateAll>
              <b>{{ defaultModelKeys.length || 0 }}</b> 个
            </ng-template>
            内容
            
            <button
              nz-button
              nzType="link"
              (click)="selectMoreModel()"
              [disabled]="detailForms | sencondCouponEditStatus: 'special'"
            >选择更多</button>

            <!-- select-tree -->
            <model-select-tree
              [(ngModel)]="isModelVisible"
              [defaultKeys]="defaultModelKeys"
              (onSubmit)="subModelTree($event)"
            ></model-select-tree>
          </div>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px">货主</nz-form-label>
        <nz-form-control nzFlex="400px">
          <p class="p-b-10">
            <label
              nz-radio
              [(ngModel)]="supplierAll"
              (ngModelChange)="modelOwnerAllChange($event, 2)"
              [nzDisabled]="detailForms | sencondCouponEditStatus: 'special'"
            >全选</label>

            <button
              nz-button
              nzType="link"
              nzSize="small"
              nzDanger
              (click)="modelOwnerNotAllChange(2)"
            >全不选</button>
          </p>

          <nz-select
            nzShowSearch
            nzAllowClear
            [nzMaxTagCount]="1"
            nzMode="multiple"
            nzPlaceHolder="请选择货主"
            [(ngModel)]="supplierSelected"
            (ngModelChange)="supplierChange($event)"
            [nzDisabled]="detailForms | sencondCouponEditStatus: 'special'"
          >
            <nz-option
              *ngFor="let option of supplierOptions"
              [nzLabel]="option.name"
              [nzValue]="option.id"
            ></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px">指定B端成色</nz-form-label>
        <nz-form-control nzFlex="400px">
          <zdy-checkbox-group
            *ngIf="conditionOptionsB.length"
            [checkOptions]="conditionOptionsB"
            [checkKeys]="{
              key: 'id',
              label: 'name'
            }"
            [(ngModel)]="selectConditionB"
            [disabled]="detailForms | sencondCouponEditStatus: 'special'"
          ></zdy-checkbox-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px">指定C端成色</nz-form-label>
        <nz-form-control nzFlex="400px">
          <zdy-checkbox-group
            *ngIf="conditionOptionsC.length"
            [checkOptions]="conditionOptionsC"
            [checkKeys]="{
              key: 'id',
              label: 'name'
            }"
            [(ngModel)]="selectConditionC"
            [disabled]="detailForms | sencondCouponEditStatus: 'special'"
          ></zdy-checkbox-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px">排除可用商品</nz-form-label>
        <nz-form-control nzFlex="400px">
          已选 <b>{{ excludeGoodsIds?.length || '0' }}</b> 个商品
          <button
            nz-button
            nzType="link"
            (click)="previewModal(1)"
            [disabled]="!excludeGoodsIds?.length || (detailForms | sencondCouponEditStatus: 'special')"
          >点击查看</button>

          <button
            nz-button
            nzType="link"
            (click)="showSelectGoods(1)"
            [disabled]="detailForms | sencondCouponEditStatus: 'special'"
          >选择更多</button>

          <i
            nz-icon
            nzType="exclamation-circle"
            nzTheme="outline"
            class="m-l-10"
            nz-tooltip
            nzTooltipTitle="可以在指定机型和货主之内，去掉部分商品不参予优惠"
          ></i>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px">追加可用商品</nz-form-label>
        <nz-form-control nzFlex="400px">
          已选 <b>{{ addGoodsIds?.length || '0' }}</b> 个商品
          <button
            nz-button
            nzType="link"
            (click)="previewModal(2)"
            [disabled]="!addGoodsIds?.length || (detailForms | sencondCouponEditStatus: 'special')"
          >点击查看</button>

          <button
            nz-button
            nzType="link"
            (click)="showSelectGoods(2)"
            [disabled]="detailForms | sencondCouponEditStatus: 'special'"
          >选择更多</button>

          <i
            nz-icon
            nzType="exclamation-circle"
            nzTheme="outline"
            class="m-l-10"
            nz-tooltip
            nzTooltipTitle="可以在指定机型和货主之外，再指定部分商品参予优惠"
          ></i>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px">状态</nz-form-label>
        <nz-form-control nzFlex="400px">
          <nz-badge
            [nzStatus]="[3, 4].includes(formParams.status) ? 'error' : [2].includes(formParams.status) ? 'success' : 'default'"
            [nzText]="formParams.status | sencondCouponStatus: 'label'"
          ></nz-badge>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <!-- E 适用商品 -->
</nz-card>

<nz-card class="m-t-2">
  <div nz-row nzJustify="center" nzAlign="middle">
    <button
      *ngIf="formParams.status === 6"
      nz-button
      nzType="primary"
      (click)="showExamineModal()"
    >审核</button>

    <button
      *ngIf="formParams.status === 5 && routeParams.id && routeParams.type == 1"
      nz-button
      nzType="primary"
      class="m-l-10"
      (click)="submitForms(6)"
    >提交审核</button>

    <button
      [hidden]="[3, 4].includes(formParams.status) && !['0', '3'].includes(routeParams.type)"
      nz-button
      nzType="primary"
      class="m-l-10"
      (click)="submitForms(5)"
    >保存</button>

    <button
      nz-button
      nzType="default"
      class="m-l-10"
      (click)="back()"
    >返回</button>
  </div>
</nz-card>

<!-- S 选择指定 Modal -->
<goods-select-modal
  [(ngModel)]="isGoodsVisible"
  [tickOptions]="modelGoodOptions"
  [disabledOptions]="disabledOptions"
  (subOptions)="submitSelectGoods($event)"
></goods-select-modal>
<!-- S 选择指定 Modal -->

<!-- S 已选查看 -->
<goods-preview-modal
  [(ngModel)]="isPreviewVisible"
  [tableDatas]="previewTable"
  [previewIds]="previewGoodIds"
  (dataChange)="addExcludeChange($event)"
></goods-preview-modal>
<!-- E 已选查看 -->

<!-- S 审核Modal -->
<nz-modal
  nzClassName="custom-model-wrap"
  [nzFooter]="null"
  [(nzVisible)]="isExamineVisible"
  [nzTitle]="'审核'"
  (nzOnCancel)="isExamineVisible = false">

  <div *nzModalContent>
    <div class="custom-model-body">
      <nz-textarea-count [nzMaxCharacterCount]="100">
        <textarea rows="4" nz-input placeholder="请输入审核意见" [(ngModel)]="examineParams.remark"></textarea>
      </nz-textarea-count>
    </div>

    <div class="custom-model-foot">
      <div class="custom-foot-cont">
        <button nz-button nzType="primary" (click)="subExamine(1)">审核通过</button>
        <button nz-button nzType="primary" nzDanger (click)="subExamine(7)">审核不通过</button>
      </div>
    </div>
  </div>
</nz-modal>
<!-- E 审核Modal -->